<template>
	<view class="freeCourseBox">
		<view class="topBox">
			<image src="../../static/banner_xianshi.png" mode="widthFix" class="topImg"></image>
		</view>
		<view v-for=" i in 10" :key="i" class="ListBox">
			<view class="cont ">
				<view class="imgBox"><image src="../../static/img_03.png" mode="widthFix"></image>
				<view class="hotPeople justify_center">
					<image src="../../static/icon_people2x.png" mode="widthFix" class="hotImg"></image>
					<text>12.1万人</text>
				</view></view>
				<view class="contInfo">
					<view class="title">课程名称 课程名称 课程名称 课程名称 课程名称课程名称课程名称课程名称</view>
					<view class="btn">立即学习</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
.freeCourseBox {
	image {
		display: block;
	}
	.topBox {
		position: relative;
		.topImg {
			width: 100%;
		}
	}
	.ListBox {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		.cont {
			display: flex;
			align-items:flex-start;
			.imgBox {
				width: 800rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
								overflow: hidden;
				image {
					width: 100%;
				}
				.hotPeople {
					// position: absolute;
					text-align: center;
					background-color: #f4f4f4;
					.hotImg {
						width: 30rpx;
						margin-right: 20rpx;
					}
					text {
						font-size: 32rpx;
						color: #d0d0d0;
					}
				}
			}
			.contInfo {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 1.2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					height: 72rpx;
				}
				.btn {
					margin-top: 60rpx;
					margin-left: auto;
	width: 300rpx;
	height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		border-radius: 40rpx;
		background: linear-gradient(to right, #ff5930 , #ff9b49);
	}
			
			}
		}
		.footer {
			.progressBox {
				width: 42%;
				.proTitle {
					font-size: 36rpx;
					font-weight: bold;
					font-family: "Times New Roman",Georgia,Serif;;
				}
				.progress {
					border-radius: 20rpx;
					overflow: hidden;
				}
			}
			.btnBox {

				.redImg {
					position: absolute;
					right: 10px;
					top: -40rpx;
					width: 80rpx;
				}
			}
		}
	}
}
</style>
